<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>debug2</title>
		<style>
			body
			{
				margin: 0;
				background-color: black;
			}
			#d0
			{
				position: absolute;
				margin: 200px;
				text-align: center;
			}
			@keyframes ct0
			{
				0%{
					transform: rotate(0deg);
					border: 3px solid aqua;
				}
				50%
				{
					transform: rotate(180deg);
					border: 3px solid red;
				}
				100%
				{
					transform: rotate(360deg);
					border: 3px solid aqua;
				}
			}
			@keyframes ct1
			{
				0%{
					border: 1px solid aqua;
					left: 0px;
					width: 500px;
				}
				10%{
					border: 1px solid aqua;
					left: 0px;
					width: 500px;
				}
				20%
				{
					border: 1px solid red;
					left: 240px;
					width: 20px;
				}
				80%
				{
					border: 1px solid red;
					left: 240px;
					width: 20px;
				}
				90%{
					border: 1px solid aqua;
					left: 0px;
					width: 500px;
				}
				100%
				{
					border: 1px solid aqua;
					left: 0px;
					width: 500px;
				}
			}
			@keyframes ct2
			{
				0%{
					border: 1px solid aqua;
					top: 0px;
					height: 500px;
				}
				10%{
					border: 1px solid aqua;
					top: 0px;
					height: 500px;
				}
				20%
				{
					border: 1px solid red;
					top: 240px;
					height: 20px;
				}
				80%
				{
					border: 1px solid red;
					top: 240px;
					height: 20px;
				}
				90%{
					border: 1px solid aqua;
					top: 0px;
					height: 500px;
				}
				100%
				{
					border: 1px solid aqua;
					top: 0px;
					height: 500px;
				}
			}
			.mgc
			{
				display: block;
				position: absolute;
				background-color: transparent;
				border: 3px solid aqua;
				animation: ct0 infinite linear;
			}
			#d0d1
			{
				height: 500px;
				width: 500px;
				border-radius: 100%;
				animation-duration: 2s;
				border-bottom: transparent;
				border-left: transparent;
				
			}
			#d0d2
			{
				left: 125px;
				top: 125px;
				height: 250px;
				width: 250px;
				animation-duration: 2s;
				animation-delay: 0.25s;
			}
			#d0d3
			{
				left: 125px;
				top: 125px;
				height: 250px;
				width: 250px;
				animation-duration: 2s;
			}
			#d0d4
			{
				left: 100px;
				top: 100px;
				height: 300px;
				width: 300px;
				border-radius: 100%;
				animation-duration: 2.5s;
			}
			#d0d5
			{
				left: 75px;
				top: 75px;
				height: 350px;
				width: 350px;
				animation-duration: 4s;
			}
			#d0d6
			{
				left: 75px;
				top: 75px;
				height: 350px;
				width: 350px;
				animation-duration: 4s;
				animation-delay: 0.5s;
			}
			#d0d7
			{
				left: 74px;
				top: 74px;
				height: 352px;
				width: 352px;
				border-radius: 100%;
				animation-duration: 5s;
			}
			#d0d8
			{
				left: -2px;
				top: -2px;
				height: 500px;
				width: 500px;
				border-radius: 100%;
				animation-duration: 3s;
			}
			#d0d8d1
			{
				position: absolute;
				top: 0px;
				left: 248px;
				height: 500px;
				width: 4px;
				border-radius: 4px;
				border: aqua 1px solid;
				animation: ct2 4s infinite;
			}
			#d0d8d2
			{
				position: absolute;
				top: 248px;
				left: 0px;
				height: 4px;
				width: 500px;
				border-radius: 4px;
				border: aqua 1px solid;
				animation: ct1 4s infinite;
			}
			#d0d9
			{
				top: 150px;
				left: 150px;
				height: 200px;
				width: 200px;
				border-radius: 100%;
				animation-duration: 5s;
			}
			#d0d9d1
			{
				position: absolute;
				top: 45px;
				left: 50px;
				height: 0px;
				width: 0px;
				border: solid transparent 50px;
				border-top: 0px;
				border-bottom: rgba(255, 255, 0, 0.3) 86px solid;
			}
			#d0d9d2
			{
				position: absolute;
				top: 70px;
				left: 50px;
				height: 0px;
				width: 0px;
				border: solid transparent 50px;
				border-bottom: 0px;
				border-top: rgba(255, 255, 0, 0.3) 86px solid;
			}
			#d0d10
			{
				left: 125px;
				top: 125px;
				height: 250px;
				width: 250px;
				border-radius: 100%;
				animation-duration: 4s;
			}
			#d0d11
			{
				left: -2px;
				top: -2px;
				height: 500px;
				width: 500px;
				border-radius: 100%;
				animation-duration: 5s;
			}
			#d0d11d1
			{
				position: absolute;
				top: 0px;
				left: 248px;
				height: 500px;
				width: 4px;
				border-radius: 4px;
				border: aqua 1px solid;
				animation: ct2 3s infinite;
			}
			#d0d11d2
			{
				position: absolute;
				top: 248px;
				left: 0px;
				height: 4px;
				width: 500px;
				border-radius: 4px;
				border: aqua 1px solid;
				animation: ct1 3s infinite;
			}
			#d0d12
			{
				left: -2px;
				top: -2px;
				height: 500px;
				width: 500px;
				border-radius: 100%;
				animation-duration: 7s;
			}
			#d0d12d1
			{
				position: absolute;
				top: 0px;
				left: 248px;
				height: 500px;
				width: 4px;
				border-radius: 4px;
				border: aqua 1px solid;
				animation: ct2 6s infinite;
			}
			#d0d12d2
			{
				position: absolute;
				top: 248px;
				left: 0px;
				height: 4px;
				width: 500px;
				border-radius: 4px;
				border: aqua 1px solid;
				animation: ct1 6s infinite;
			}
		</style>
	</head>
	<body>
		<div id="bg">
			<div id="d0">
				<div class="mgc" id="d0d1"></div>
				<div class="mgc" id="d0d2"></div>
				<div class="mgc" id="d0d3"></div>
				<div class="mgc" id="d0d4"></div>
				<div class="mgc" id="d0d5"></div>
				<div class="mgc" id="d0d6"></div>
				<div class="mgc" id="d0d7"></div>
				<div class="mgc" id="d0d8">
					<div id="d0d8d1"></div>
					<div id="d0d8d2"></div>
				</div>
				<div class="mgc" id="d0d9">
					<div id="d0d9d1"></div>
					<div id="d0d9d2"></div>
				</div>
				<div class="mgc" id="d0d10"></div>
				<div class="mgc" id="d0d11">
					<div id="d0d11d1"></div>
					<div id="d0d11d2"></div>
				</div>
				<div class="mgc" id="d0d12">
					<div id="d0d12d1"></div>
					<div id="d0d12d2"></div>
				</div>
			</div>
		</div>
        </body>
</html>